import React, { PureComponent } from 'react'
import { Input, Card, Avatar, Tooltip } from 'antd'
import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';
import EchartLine from './echartLine'
import './index.css'

export default class Home extends PureComponent {
  render() {
    return (
      <div style={{ margin: '-25px 30px 0px 0px',paddingLeft:'30px' }}>
        <div style={{ display: 'flex', width: '100%', alignItems: 'center', transform: 'translate(-5px,18px)' }}>
          <div style={{ flex: 'auto' }}>
            <div style={{ fontWeight: '800', fontSize: '35px' }}>早上好 ，</div>
            <div style={{ fontWeight: '800', fontSize: '25px' }}>欢迎开启乐贝塔的一天</div>
          </div>
          <Input placeholder='搜索内容' style={{ borderRadius: '15px', maxWidth: '250px', height: '40px', textAlign: 'center', }} />
        </div>
        <div style={{ display: 'flex', width: '100%', alignItems: 'center', margin: '50px 0 20px' }}>
          <div style={{ flex: 'auto' }}>
            <EchartLine></EchartLine>
          </div>
          <div >
            <Card title="团队成员" extra={<span>同事</span>} style={{ width: 300, borderRadius: '15px', border: '1px solid #ececec', backgroundColor: '#fff' }} >
              <div style={{
                display: 'flex', width: '100%', justifyContent: 'space-betwween'
                , marginBottom: '15px', alignItems: 'center'
              }}><Avatar src="https://joeschmoe.io/api/v1/random" />
                <span style={{ marginLeft: '5px' }}>李华</span>
                <span style={{ marginLeft: 'auto' }}>icon</span>
              </div>
              <div style={{
                display: 'flex', width: '100%', justifyContent: 'space-betwween'
                , marginBottom: '15px', alignItems: 'center'
              }}><Avatar src="https://joeschmoe.io/api/v1/random" />
                <span style={{ marginLeft: '5px' }}>李华</span>
                <span style={{ marginLeft: 'auto' }}>icon</span>
              </div>
              <div style={{
                display: 'flex', width: '100%', justifyContent: 'space-betwween'
                , marginBottom: '15px', alignItems: 'center'
              }}><Avatar src="https://joeschmoe.io/api/v1/random" />
                <span style={{ marginLeft: '5px' }}>李华</span>
                <span style={{ marginLeft: 'auto' }}>icon</span>
              </div>
              <div style={{
                margin: '10px 0',
                marginLeft: '70%'
              }}>查看全部</div>
            </Card>
          </div>
        </div >
        <div style={{ display: 'flex', width: '100%', alignItems: 'center', paddingBottom: '20px' }}>
          <Card title="客户" extra={<span>课程</span>} style={{ width: 300, borderRadius: '15px', border: '1px solid #ececec', backgroundColor: '#fff' }} >
            <div style={{
              display: 'flex', width: '100%', justifyContent: 'space-betwween'
              , marginBottom: '15px', alignItems: 'center'
            }}>
              <span style={{ marginLeft: '5px', color: '#8589e9' }}>李华</span>
              <span style={{ marginLeft: 'auto' }}>icon</span>
            </div>
            <div style={{
              display: 'flex', width: '100%', justifyContent: 'space-betwween'
              , marginBottom: '15px', alignItems: 'center'
            }}>
              <span style={{ marginLeft: '5px', color: '#8589e9' }}>李华</span>
              <span style={{ marginLeft: 'auto' }}>icon</span>
            </div>
            <div style={{
              display: 'flex', width: '100%', justifyContent: 'space-betwween'
              , marginBottom: '15px', alignItems: 'center'
            }}>
              <span style={{ marginLeft: '5px', color: '#8589e9' }}>李华</span>
              <span style={{ marginLeft: 'auto' }}>icon</span>
            </div>
          </Card >
          <Card title="项目/课程" extra={<span>三月</span>} style={{ backgroundColor: '#fff', borderRadius: '15px', border: '1px solid #ececec', marginLeft: 'auto', width: '60%', maxWidth: '600px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div style={{ backgroundColor: '#f5f7fe', marginBottom: '5px', borderRadius: '5px', padding: '10px', width: '150px' }}>
                <div style={{ height: 100 }}>
                  少儿编程
                </div>
                <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
                  <Avatar src="https://joeschmoe.io/api/v1/random" />
                  <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
                  <Tooltip title="Ant User" placement="top">
                    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                  </Tooltip>
                  <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
                </Avatar.Group>
              </div>
              <div style={{ backgroundColor: '#f5f7fe', marginBottom: '5px', borderRadius: '5px', padding: '10px', width: '150px' }}>
                <div style={{ height: 100 }}>
                  少儿编程
                </div>
                <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
                  <Avatar src="https://joeschmoe.io/api/v1/random" />
                  <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
                  <Tooltip title="Ant User" placement="top">
                    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                  </Tooltip>
                  <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
                </Avatar.Group>
              </div>
              <div style={{ backgroundColor: '#f5f7fe', marginBottom: '5px', borderRadius: '5px', padding: '10px', width: '150px' }}>
                <div style={{ height: 100 }}>
                  少儿编程
                </div>
                <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
                  <Avatar src="https://joeschmoe.io/api/v1/random" />
                  <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
                  <Tooltip title="Ant User" placement="top">
                    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                  </Tooltip>
                  <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
                </Avatar.Group>
              </div>
            </div>
          </Card>
        </div>
      </div >
    )
  }
}